<!--  -->
<template>
  <div>
    <el-form
      label-position="right"
      id="gis-search-bar"
      class="gis-search-bar"
      inline
    >
      <div class="form-box" id="form-box">
        <div class="public-area-two">
          <el-form-item style="width: 120px">
            <el-select
              size="mini"
              v-model="selectType"
              style="width: 120px"
              @change="selectChange"
            >
              <el-option
                v-for="(item, index) in selectList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <span class="public-border"> | </span>

          <el-form-item>
            <el-date-picker
              size="mini"
              v-model="form.ptMonth"
              type="date"
              :key="dayLoadiong"
              placeholder="年月日"
              @change="monthChange"
              style="width: 140px"
              :picker-options="pickerOptions"
              value-format="yyyyMMdd"
              :clearable="false"
              v-if="selectType == 1"
            />
            <el-select
              v-else
              size="mini"
              v-model="form.ptMonth"
              style="width: 100px"
              placeholder="年月"
              @change="monthChange"
            >
              <el-option
                v-for="(item, index) in monthList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <span class="public-border" v-if="selectType == 1"> | </span>

          <el-form-item label="区县:" v-if="selectType == 1">
            <el-select
              size="mini"
              v-model="form.zoneId"
              @change="handleZoneId"
              style="width: 90px"
            >
              <template v-for="(item, index) in zoneList">
                <el-option
                  :key="index"
                  :label="item.name"
                  v-if="item.id"
                  :value="item.id"
                />
              </template>
            </el-select>
          </el-form-item>

          <el-form-item label="街道:" v-if="selectType == 1">
            <el-select
              class="customInput1"
              size="mini"
              :disabled="form.townId == null"
              v-model="form.townId"
              v-if="form.zoneId !== '全部'"
              @change="townIdChange"
            >
              <el-option
                v-for="(item, index) in townList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-input
              class="customInput1"
              v-else
              style="width: 100px"
              size="mini"
              :disabled="form.townId == null"
              :value="townName"
            />
          </el-form-item>

          <el-form-item label="场景数据:" v-if="selectType == 1">
            <el-switch :title="'场景数据'" v-model="compare"></el-switch>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <!-- 右侧数据 -->
    <mobile-panel
      top="30%"
      right="0px"
      v-if="selectType == 1"
      :name="getName.name"
      :zoneNames="getName.zoneNames"
      bearing="2"
      @moving="changeMoveState"
      classNames="data-box1"
      @changeNav="changeNav"
      ref="filterPanel"
    >
      <filter-panel :form="form" @changeType="changeType"></filter-panel>
    </mobile-panel>
    <!-- 在线发卡 -->
    <mobile-panel
      top="30%"
      right="0px"
      v-else
      name="在线发卡"
      zoneNames="(全国)"
      :showBox="true"
      bearing="2"
      @moving="changeMoveState"
      classNames="data-box3"
    >
      <hairpinList :form="form"></hairpinList>
    </mobile-panel>
    <!-- 左侧场景数据 -->
    <modal-box
      v-show="compare && selectType === 1"
      top="30%"
      left="70px"
      :name="`场景数据${stateName}`"
      bearing="1"
      classNames="layerBox"
      :showBox="true"
      @moving="changeMoveState"
      @close="closeLayer"
    >
      <stateList :form="form" @locaclAraa="locaclAraa"></stateList>
    </modal-box>
    <!-- gis -->
    <div class="gis-container overflow-hidden">
      <iframe
        v-if="showIframe"
        name="gis"
        class="w-100 h-100 position-relative iframe-a"
        @load="iframeLoaded"
        :src="`/Gis/${iframeUrl}.html`"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="no"
      ></iframe>
      <!--  -->
      <div class="map-bottom-left-box">
        <div class="map-select-box">
          <div
            v-for="(item, index) in mapList"
            :key="index"
            v-show="item.id !== mapId"
            @click="setMapId(item.id)"
          >
            <img :src="item.src" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 蒙层start -->
    <div class="mode-layer" v-show="isMove"></div>
    <!-- 蒙层end -->
  </div>
</template>

<script>
import MobilePanel from '@/components/gisPageComponents/mobilePanel'
import FilterPanel from './components/filterPanel'
import stateList from './components/statelist.vue'
import hairpinList from './components/hairpinList.vue'
import ModalBox from '@/components/gisPageComponents/modalBox/modalBox.vue'
import { mapGetters, mapState, createNamespacedHelpers } from 'vuex'
import { getDictionary } from '@/apis/gis'
import {
  changeMap,
  getBoundary,
  setBoundary,
  addGisData,
  delGisData
} from '@/utils/gisObjFun.js'

const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm,
  mapActions: mapActionsForm
} = createNamespacedHelpers('gisForm')

const {
  mapState: mapStateGis,
  mapMutations: mapMutationsGis,
  mapActions: mapActionsGis
} = createNamespacedHelpers('gisPage')
var gisObj = null
import { getBounding, getAllBoundary, getDayMinAndMax } from '@/apis/gis'
export default {
  components: {
    MobilePanel,
    FilterPanel,
    ModalBox,
    hairpinList,
    stateList
  },
  data() {
    var disabledDate = time => {
      return time.getTime() > this.maxDay || time.getTime() < this.minDay
    }
    return {
      stateName: '', //场景标题
      mapId: 1,
      minDay: 0,
      maxDay: 0,
      townName: '全部',
      dayLoadiong: false,
      mapList: [
        { src: '/img/floor-plan.png', name: '平面图', id: 1 },
        { src: '/img/satellite-imagery.png', name: '卫星图', id: 2 }
      ],
      getNameData: [],
      monthList: [],
      isMove: false,
      selectType: 1, //1为日新增分析 2为线上发卡分析
      selectList: [
        { value: 1, label: '日新增分析' },
        { value: 2, label: '线上发卡分析' }
      ],
      showIframe: false,
      form: {
        ptMonth: '', //年月
        zoneId: '全部', //区县id
        townId: null, //街道id
        areaId: '',
        type: 1
      },
      pickerOptions: {
        disabledDate
      },
      compare: true, //场景数据开关
      iframeUrl: 'index'
    }
  },
  computed: {
    ...mapState(['home', 'gis', 'gisForm']),
    ...mapStateForm([
      // 'monthList', //月份列表
      'zoneList', //区县列表
      'townList' //街道列表
    ]),
    ...mapStateGis([
      'gisObj', //地图对象
      'dictionary',
      // 'iframeUrl', //地图地址
      'boundaryList' //存储边界值值，缓存
    ]),
    getName() {
      const { cityName, cityId } = this.home.userInfoVo
      const { zoneList, townList } = this.gisForm
      const { zoneId, townId } = this.form
      let zoneItem = zoneList.find(v => v.id == zoneId) //获取区县
      let townItem = townList.find(v => v.id == townId) //获取街道
      let zoneName = zoneItem ? zoneItem.name : ''
      let townName = townItem ? townItem.name : ''
      let cn = cityName
      let zn =
        zoneId == cityId || zoneId == '全部'
          ? ''
          : zoneName != ''
          ? '>' + zoneName
          : ''
      let tn =
        townId == null || townId == '全部' ? '' : townName ? '>' + townName : ''
      // console.log( cityName, cityId,zoneName, townName, cn , zn, tn );
      this.getNameData = [
        { name: cn, id: cityId, label: 'cityId' },
        {
          name: zn.indexOf('>') === -1 ? '' : zn.substr(1),
          id: zoneId,
          label: 'zoneId'
        },
        {
          name: tn.indexOf('>') === -1 ? '' : tn.substr(1),
          id: townId,
          label: 'townId'
        }
      ]
      return { name: '数据', zoneNames: cn + zn + tn, townName, cn }
    }
  },
  methods: {
    ...mapMutationsGis(['setDictionary']),
    ...mapActionsForm(['changeZoneList']),
    // 卫星图切换 -t
    setMapId(mapId) {
      this.mapId = mapId
      // console.log(mapId, gisObj)
      changeMap(mapId, gisObj)
    },
    selectChange(val) {
      // 重置form
      this.form = {
        ptMonth: '', //年月
        zoneId: '全部', //区县id
        townId: null, //街道id
        areaId: '',
        type: 1
      }
      this.setMonthList()
      if (val == 2) {
        this.getAllBoundary()
        this.setBoundaryWeb(this.home.userInfoVo.cityId)
        //地图缩放5下
        for (let i = 0; i < 5; i++) {
          gis.window.document
            .querySelector('.esriSimpleSliderDecrementButton')
            .click()
        }
        delGisData(16, gisObj)
      } else {
        gisObj.clearBoundary()
        gisObj.clearArea()
        this.setBoundaryWeb(this.home.userInfoVo.cityId)
        this.getDayMinAndMax()
      }
    },
    async getDictionary() {
      const { cityId = '' } = this.home.userInfoVo
      const { data = [] } =
        cityId &&
        (await getDictionary({
          cityId
        }))
      this.setDictionary(data)
      // 解决 iframe加载完成 地图无数据无法定位行政区的问题
      this.showIframe = true

      // console.log('地图初始化：', cityId, data)
    },
    monthChange() {
      this.setGridBoundary()
    },
    getDayMinAndMax() {
      getDayMinAndMax().then(res => {
        // console.log(res, 'data')
        if (res.code == 1) {
          this.maxDay = res.data.maxDayTime
          this.minDay = res.data.minDayTime
          let d = new Date(this.maxDay)
          let y = d.getFullYear()
          let m = d.getMonth() + 1
          let dd = d.getDate()
          this.form.ptMonth = `${y}${m < 9 ? '0' + m : m}${
            dd < 9 ? '0' + dd : dd
          }`
          this.setGridBoundary()
        }
        this.dayLoadiong = true
      })
    },
    getZneList(list) {
      let newList = list ? list : []
      return newList.splice(1)
    },
    // 获取月份列表
    setMonthList() {
      if (this.selectType === 1) {
        return
      }
      let d = new Date()
      let y = d.getFullYear()
      let m = d.getMonth()
      let arr = [],
        arr1 = [],
        arr2 = []
      for (let i = 1; i <= m; i++) {
        let str = y + '.' + i
        let v = y + '' + i
        if (i < 10) {
          str = y + '.0' + i
          v = y + '0' + i
        }
        arr1.push({ label: str, value: Number(v) })
      }
      if (arr1.length < 12) {
        for (let i = 12; i > arr1.length; i--) {
          let str = y - 1 + '.' + i
          let v = y - 1 + '' + i
          if (i < 10) {
            str = y - 1 + '.0' + i
            v = y - 1 + '0' + i
          }
          arr2.push({ label: str, value: Number(v) })
        }
      }
      arr1 = arr1.reverse()
      arr = arr1.concat(arr2)

      // 如果月份值为null 不存在的情况 会给默认值
      if (!this.form.ptMonth) {
        if (d.getDate() <= 7) {
          this.form.ptMonth = arr[1]['value']
        } else {
          this.form.ptMonth = arr[0]['value']
        }
      }
      this.monthList = arr
    },
    // iframe初始化
    iframeLoaded() {
      var gridWidth = this.home.userInfoVo.gridType
        ? this.home.userInfoVo.gridType
        : 50
      gis.window.initMap({
        onLoad: this.mapLoaded,
        areaClicked: this.areaClicked,
        gridWidth //需要设置才有热力图
      })
    },
    areaClicked(data, name) {
      if (name == this.home.userInfoVo.provinceName) {
        this.selectType = 1
        this.selectChange(1)
      }
    },
    // 初始化map地图
    mapLoaded(obj) {
      gisObj = obj
      // console.log(this.home.userInfoVo)
      // this.getSceneArea()
      if (this.dictionary.length !== 0) {
        // 跳转当前城市定位
        // console.log(this.dictionary, item)
        let item = this.dictionary.find(
          v => v.id == this.home.userInfoVo.cityId
        )
        if (item) gisObj.setBoundary(item)
      } else {
        this.setBoundaryWeb(this.home.userInfoVo.cityId)
      }
      this.getDayMinAndMax()
    },
    // 修改type值
    changeType({ zoneId, townId, areaId, type }) {
      this.form.zoneId = zoneId ? zoneId : this.form.zoneId
      this.form.townId = townId ? townId : this.form.townId
      this.form.areaId = areaId ? areaId : this.form.areaId
      this.form.type = type ? type : this.form.type
      if (type == 2) {
        this.handleZoneId(this.form.zoneId)
      } else {
        this.townIdChange(this.form.townId)
      }
    },
    //设置热力图
    setGridBoundary() {
      let userInfo = this.home.userInfoVo
      getBoundary(
        {
          ptMonth: this.form.ptMonth,
          ptDay: this.form.ptMonth,
          network: '16+',
          cityId: userInfo.cityId,
          mnc: userInfo.mnc
        },
        0,
        (...list) => {
          // console.log(list)
          addGisData(list[1], { network: '16+', status: 1 }, true, gisObj)
        }
      )
    },
    // 移动事件
    changeMoveState(nv) {
      this.isMove = nv
    },
    changeNav(name) {
      let list = this.getNameData
      let navItem = list.find(v => v.name == name)
      // 修改筛选项
      if (navItem.label == 'cityId') {
        // 筛选项选择全部
        this.form.zoneId = '全部' //区县id
        this.form.townId = null //街道id
        this.form.type = 1
        this.setBoundaryWeb(this.home.userInfoVo.cityId)
      } else if (navItem.label == 'zoneId') {
        this.form.type = 2
        this.handleZoneId(navItem.id)
      } else {
        this.form.type = 3
        this.townIdChange(navItem.townId)
      }
    },
    // 关闭场景数据弹窗
    closeLayer() {
      this.compare = false
    },
    async getAllBoundary() {
      let obj = {
        cityId: this.home.userInfoVo.id,
        type: 6
      }
      const { data } = await getAllBoundary(obj)
      if (data) {
        //  有点击效果
        gisObj.unSelectArea()
        gisObj.setArea(data)
        // gisObj.locateArea(this.home.userInfoVo.provinceId)
        // gisObj.unSelectArea()
        gisObj.clearBoundary()
      } else {
        gisObj.clearArea()
      }
    },
    // 设置场景边界
    setBoundaryWeb(id) {
      const item = this.zoneList.find(v => v.id == id)
      if (item) {
        gisObj.setBoundary(item)
      }
    },
    // 设置边界并跳转
    async queryAloneArea(state) {
      let form = state ? state : this.form
      let params = {
        cityId: this.home.userInfoVo.cityId,
        ...form
      }

      let { data = '' } = await getBounding(params)
      return data
    },
    townIdChange(value, flag = true) {
      if (flag) {
        this.form.type = 3
      }
      this.locaclAraa()
    },
    locaclAraa(params) {
      this.queryAloneArea(params).then(data => {
        setBoundary(data, gisObj)
        // getGridBoundary(this.form, [], 0, gisObj)
      })
    },
    // 选择区县
    handleZoneId(value, flag = true) {
      if (flag) {
        this.form.type = 2
      }
      if (value && value !== this.home.userInfoVo.cityId) {
        this.form.townId = ''
        this.$store.dispatch('gisForm/changeTownList', value)
        this.locaclAraa()
        // this.setZoneId({ data: value })
        // setBoundary(value, gisObj)
      } else {
        this.form.zoneId = '全部'
        this.form.type = 1
        this.setBoundaryWeb(this.home.userInfoVo.cityId)
        this.form.townId = null
      }
    }
  },
  created() {
    this.getDictionary()
    this.changeZoneList()
    this.setMonthList()
  },
  mounted() {
    // 获取上次导入工参时间
    // this.getImportTime()
    // 表单高度
    const searchBar = document.getElementById('gis-search-bar')
    // 头部的最底部筛选
    // const bottomBox = document.getElementById('bottom-box')
    // 获取高度
    const formBox = document.getElementById('form-box')
    const formBoxH = formBox.offsetHeight
    searchBar.style.height = formBoxH + 'px'
    // bottomBox.style.top = 10 + formBoxH + 'px'
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.map-bottom-left-box {
  display: flex;
  position: absolute;
  bottom: 15px;
  left: 50px;
}
.map-select-box span {
  padding: 0 5px;
  color: #fff;
  background: #0283e1;
  border-radius: 0px 0px 4px 0px;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 12px;
}
.map-select-box img {
  width: 100%;
  height: auto;
}
.map-select-box > div {
  width: 65px;
  height: 40px;
  border: 1px solid #dcdfe6;
  position: relative;
  margin-right: 5px;
  cursor: pointer;
}

/* 蒙层 */
.mode-layer {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.gis-search-bar {
  font-size: 12px;
  padding-left: 16px;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.el-form {
  width: 100%;
  height: 40px;
  min-height: 40px;
  background-color: #fafafa;
}
// 表单盒子
.form-box {
  width: 100%;
  // height: 100%;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  .public-area {
    // width: 50%;
    height: 100%;
    // flex: 1;
    padding-right: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .customInput1 {
      width: 130px;
      min-width: 50px;
    }

    .customInput {
      width: 160px;
      min-width: 50px;
    }
  }

  // 右侧横杠样式
  .public-border {
    height: 100%;
    padding-left: 5px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #bac1cb;
  }
  .right-content {
    display: flex;
    align-items: flex-start;
    height: fit-content;
  }
  .right-area {
    // height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    // padding-left: 20px;
    .lt-btn-box {
      display: flex;
      align-items: center;
    }
  }

  .public-area-two {
    // width: 60%;
    height: 100%;
    flex: 1;
    height: 100%;
    // padding-right: 20px;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    // justify-content: space-between;

    > div {
      margin-right: 20px;
    }
  }

  .right-area-two {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
    > div:first-child {
      margin-right: 20px;
      min-width: 105px;
    }
  }
  .bottom-box {
    position: absolute;
    top: 45px;
    left: -10px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    display: flex;
    align-items: center;
  }

  .right-box-go-back {
    position: absolute;
    top: 45px;
    right: 5px;
    .btn-back {
      border: 1px solid #4a70ae;
      color: #4a70ae;
      padding: 7px 16px;
    }
  }

  .search-box {
    position: absolute;
    right: 0px;
    top: 50px;
  }
}
</style>
